QR コードスキャンライブラリ @yudiel/react-qr-scanner で IScannerComponents を設定してスキャン時の UI をカスタマイズしてみた

'use client';

import React, { useState } from 'react';
import { Scanner, IDetectedBarcode } from '@yudiel/react-qr-scanner';

const Home = () => {
  const [scanResult, setScanResult] = useState({ format: '', rawValue: '' });

  const handleScan = (results: IDetectedBarcode[]) => {
    if (results.length > 0) {
      setScanResult({
        format: results[0].format,
        rawValue: results[0].rawValue,
      });
    }
  };

  // コード検出時のカスタムトラッカー
  const customTracker = (
    detectedCodes: IDetectedBarcode[],
    ctx: CanvasRenderingContext2D
  ) => {
    detectedCodes.forEach((code) => {
      // 検出されたコードの周りに赤い枠を描画
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 2;
      ctx.strokeRect(
        code.boundingBox.x,
        code.boundingBox.y,
        code.boundingBox.width,
        code.boundingBox.height
      );

      // コードの内容を表示
      ctx.fillStyle = 'white';
      ctx.fillRect(
        code.boundingBox.x,
        code.boundingBox.y + code.boundingBox.height,
        code.boundingBox.width,
        20
      );
      ctx.fillStyle = 'black';
      ctx.fillText(
        code.rawValue,
        code.boundingBox.x,
        code.boundingBox.y + code.boundingBox.height + 15
      );
    });
  };

  return (
    <div className='h-screen flex flex-col items-center'>
      <h1>QR コードをスキャンしてください</h1>
      <div className='w-[300px]'>
        <Scanner
          onScan={handleScan}
          formats={[
            'qr_code', // QR コード
            'micro_qr_code', // マイクロ QR
          ]}
          allowMultiple={true} // これを指定すると連続でスキャンできる
          // スキャン時の UI をカスタマイズ
          components={{
            tracker: customTracker, // コード検出時の視覚的なフィードバックをカスタマイズ
            audio: true, // スキャン時に音を鳴らす (default: true)
            onOff: true, // スキャンのオンオフを切り替えるボタンを表示する (default: false)
            zoom: true, // ズーム機能を有効にする (default: false)
            finder: false, // ファインダーを表示する (default: true)
            torch: true, // フラッシュライトを有効にする (default: false)
          }}
        />
      </div>
      {scanResult.rawValue && (
        <div className='mt-4 p-2 border border-gray-300 rounded'>
          <p>
            <strong>フォーマット:</strong> {scanResult.format}
          </p>
          <p>
            <strong>内容:</strong> {scanResult.rawValue}
          </p>
        </div>
      )}
    </div>
  );
};

export default Home;

npm run dev

import * as s3 from 'aws-cdk-lib/aws-s3';
import * as s3_deployment from 'aws-cdk-lib/aws-s3-deployment';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as cloudfront_origins from 'aws-cdk-lib/aws-cloudfront-origins';
import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';

export class CdkSampleStack extends cdk.Stack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    // S3 バケットの作成
    const websiteBucket = new s3.Bucket(this, 'WebsiteBucket', {
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
    });

    // リクエスト URL に index.html を自動追加する CloudFront Function の作成
    const cloudFrontFunction = new cloudfront.Function(
      this,
      'AddSecurityHeadersToTheResponseFunction',
      {
        code: cloudfront.FunctionCode.fromFile({
          filePath: 'src/add-index-html-to-request-url/index.js',
        }),
        // JavaScript runtime 2.0 を指定
        runtime: cloudfront.FunctionRuntime.JS_2_0,
      }
    );

    // CloudFront Destribution を作成
    const distribution = new cloudfront.Distribution(this, 'Distribution', {
      defaultBehavior: {
        origin:
          cloudfront_origins.S3BucketOrigin.withOriginAccessControl(
            websiteBucket
          ),
        // CloudFront Function と Distribution の関連付け
        functionAssociations: [
          {
            function: cloudFrontFunction,
            eventType: cloudfront.FunctionEventType.VIEWER_REQUEST,
          },
        ],
      },
      errorResponses: [
        {
          ttl: cdk.Duration.minutes(5),
          httpStatus: 404,
          responseHttpStatus: 404,
          responsePagePath: '/404.html',
        },
      ],
    });

    // CloudFront Distribution のドメイン名を出力
    new cdk.CfnOutput(this, 'DistributionUrl', {
      value: `https://${distribution.distributionDomainName}`,
    });

    // S3 バケットへのコンテンツのデプロイ、CloudFront Distribution のキャッシュ削除
    new s3_deployment.BucketDeployment(this, 'WebsiteDeploy', {
      distribution,
      destinationBucket: websiteBucket,
      distributionPaths: ['/*'],
      sources: [s3_deployment.Source.asset('./sample-next-app/out')], // Next.js のビルド生成物の出力パスを指定
    });
  }
}